<template>
  <div class="map-container">
    <div class="search-input">
      <!-- <el-input
        id="tipinput"
        v-model="searchText"
        placeholder="请输入关键字"
        style="width:80vw"
      /> -->
      <van-field
        @click="clickInput"
        v-model="searchText"
        id="tipinput"
        placeholder="请输入关键字"
      />
    </div>
    <div
      id="positionMap"
      class="map"
      style="height: 70vh"
    />

    <div class="select-info">
      <div class="item">
        <div class="label">选取经度：{{ selectItem.latitude }}</div>
        <div class="label">选取纬度：{{ selectItem.longitude }}</div>
      </div>
      <div class="label">定位地址：{{ selectItem.address }}</div>
    </div>
    <div class="btn-group">
      <van-button
        size="mini"
        type="info"
        @click="confirm"
      >确认</van-button>
      <van-button
        size="mini"
        type="default"
        @click="cancel"
      >关闭</van-button>
    </div>
  </div>
</template>

<script>
import MapLoader from '@/utils/AMap'
export default {
  name: '',
  components: {},
  props: {
    longitude: {
      type: String,
      default: ''
    },
    latitude: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      autoOptions: {},
      selectItem: {
        latitude: '',
        longitude: '',
        address: ''
      },
      searchText: '',
      map: null,
      marker: null,
      search: null,
      geocoder: null
    }
  },
  watch: {},
  created() { },
  mounted() {
    if (this.latitude && this.longitude) {
      this.selectItem.longitude = this.longitude
      this.selectItem.latitude = this.latitude
      this.selectItem.address = this.address
    }
    const that = this
    MapLoader().then(
      AMap => {
        console.log('地图加载成功')
        that.map = new AMap.Map('positionMap', {
          center: ['118.075815', '24.633656'],
          zoom: 15
        })
        AMap.plugin('AMap.Geocoder', function () {
          that.geocoder = new AMap.Geocoder({
            city: '厦门'
          })
        })
        AMap.plugin(['AMap.PlaceSearch', 'AMap.Autocomplete'], function () {
          // 实例化Autocomplete
          const opts = {
            input: document.getElementById('tipinput'),
            city: '厦门'
          }
          const search = new AMap.PlaceSearch({
            map: that.map
          })
          // 构造地点查询类
          const auto = new AMap.Autocomplete(opts)
          auto.on('select', select)
          function select(e) {
            search.search(e.poi.name) // 关键字查询查询
          }
          search.on('markerClick', function (e) {
            console.log(e.data)
            that.marker && that.map.remove(that.marker)
            that.geocoderGetAddress(e.data.location.lng, e.data.location.lat)
          })
          that.search = search
        })
        console.log(that.longitude)
        that.longitude && that.drawMarker(that.longitude, that.latitude)
        that.map.on('click', function (ev) {
          that.mapClick(ev)
        })
      },
      e => {
        console.log('地图加载失败', e)
      }
    )
  },
  methods: {
    clickInput() {
      console.log(123);
    },
    drawMarker(lng, lat) {
      this.marker = new AMap.Marker({
        position: [lng, lat],
        // icon: require('@/assets/img/FJZL/marker.png')
      })
      this.map.add(this.marker)
      this.map.setCenter([lng, lat])
    },
    mapClick(e) {
      this.marker && this.map.remove(this.marker)
      if (this.search.render) {
        this.searchText = ''
        this.search.render.markerList.clear()
      }
      this.drawMarker(e.lnglat.lng, e.lnglat.lat)
      this.geocoderGetAddress(e.lnglat.lng, e.lnglat.lat)
    },
    confirm() {
      console.log(this.selectItem)
      this.$emit('update:longitude', this.selectItem.longitude + '')
      this.$emit('update:latitude', this.selectItem.latitude + '')
      this.$emit('update:address', this.selectItem.address)
      this.$emit('cancel')
    },
    cancel() {
      this.$emit('cancel')
    },
    // 高德地图根据坐标获取地址
    geocoderGetAddress(lng, lat) {
      const that = this
      this.geocoder.getAddress([lng, lat], function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          that.selectItem.longitude = lng
          that.selectItem.latitude = lat
          that.selectItem.address = result.regeocode.formattedAddress
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.search-input {
  position: absolute;
  left: 30px;
  top: 80px;
  z-index: 10;
}
.btn-group {
  margin: 20px 0;
  text-align: center;
}
.select-info {
  margin-top: 5px;
  color: #333;

  .item {
    display: flex;

    .label {
      flex: 1;
    }
  }
  .label {
    font-size: 28px;
    line-height: 30px;
    text-align: left;
    padding: 5px;
  }
}

/deep/ .van-button--primary {
  margin-right: 50px;
}
</style>
